---
import { getCollection } from 'astro:content';
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
import { Icon, Badge } from '@astrojs/starlight/components';
import {largeNumberFormatter, dateFormatter } from '../utils/formatters';

const communityPlugins = await getCollection('community-plugins');
const plugins = await getCollection('plugin-docs', (entry) => entry.data.docType === 'overview');
---

<StarlightPage frontmatter={{
  title: 'Nx Plugins',
  description: 'Discover all available Nx plugins to enhance your development workflow. Each plugin provides generators, executors, and migrations to help you build modern applications.',
  tableOfContents: false,
  filter: "type:References"
}}
>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 not-content">
    {plugins.map(plugin => (
      <a 
        href={`/docs/${plugin.data.slug}`} 
        class="block h-full bg-gray-50 border-1 border-slate-200 dark:bg-slate-800/50 rounded-lg p-4 hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors no-underline dark:border-slate-900"
      >
        <div class="flex flex-col h-full">
          <div class="flex gap-3 items-center mb-3">
            <Icon name="github" class="w-6 h-6 text-gray-600 dark:text-slate-400 flex-shrink-0 mt-0.5" />
            <h3 class="text-base font-medium text-gray-900 dark:text-slate-100 leading-tight">{plugin.data.packageName}</h3>
          </div>
          
          <p class="text-sm text-gray-600 dark:text-slate-400 line-clamp-3 mb-4 flex-grow">
            {plugin.data.description}
          </p>
          <div class="flex flex-wrap items-center justify-between py-0.5 text-xs text-slate-700 dark:text-slate-400">
            {plugin.data.lastPublishedDate && (
              <div class="mr-1 my-1 flex items-center gap-1">
                <Icon name="seti:clock" class="w-3.5 h-3.5" />
                <span>{dateFormatter(plugin.data.lastPublishedDate!)}</span>
              </div>
            )}
            <div class="mx-1 my-1 flex items-center gap-1">
              <Icon name="star" class="w-4 h-4" />
              <span>{largeNumberFormatter(plugin.data.githubStars!)}</span>
            </div>
            <div class="mx-1 my-1 flex items-center gap-1">
              <Icon name="cloud-download" class="w-4 h-4" />
              <span>{largeNumberFormatter(plugin.data.npmDownloads!)}</span>
            </div>
            <div class="flex-1 flex justify-end ml-1 my-1 text-nowrap">
              <Badge size="small" variant="success" text="Nx Open Source" />
            </div>
          </div>
        </div>
      </a>
    ))}
    {communityPlugins.map(plugin => (
      <a 
        href={plugin.data.url} 
        class="block h-full bg-gray-50 dark:bg-slate-800/50 rounded-lg p-4 hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors no-underline"
        target="_blank" 
        rel="noopener noreferrer"
      >
        <div class="flex flex-col h-full">
          <div class="flex gap-3 items-center mb-3">
            <Icon name="github" class="w-6 h-6 text-gray-600 dark:text-slate-400 flex-shrink-0 mt-0.5" />
            <h3 class="text-base font-medium text-gray-900 dark:text-slate-100 leading-tight">{plugin.id}</h3>
          </div>
          
          <p class="text-sm text-gray-600 dark:text-slate-400 line-clamp-3 mb-4 flex-grow">
            {plugin.data.description}
          </p>
          <div class="flex flex-wrap items-center justify-between py-0.5 text-xs text-slate-700 dark:text-slate-400">
            {plugin.data.lastPublishedDate && (
              <div class="mr-1 my-1 flex items-center gap-1">
                <Icon name="seti:clock" class="w-3.5 h-3.5" />
                <span>{dateFormatter(plugin.data.lastPublishedDate!)}</span>
              </div>
            )}
            <div class="mx-1 my-1 flex items-center gap-1">
              <Icon name="star" class="w-4 h-4" />
              <span>{largeNumberFormatter(plugin.data.githubStars!)}</span>
            </div>
            <div class="mx-1 my-1 flex items-center gap-1">
              <Icon name="cloud-download" class="w-4 h-4" />
              <span>{largeNumberFormatter(plugin.data.npmDownloads!)}</span>
            </div>
            {plugin.data.nxVersion ? (
              <div class="flex-1 flex justify-end ml-1 my-1 text-nowrap">
                <Badge size="small" variant="caution" text={`Nx ${plugin.data.nxVersion}`} />
              </div>
            ) : (
              <div class="flex-1 flex justify-end ml-1 my-1 text-nowrap">
                <Badge size="small" variant="tip" text="Community" />
              </div>
            )}
          </div>
        </div>
      </a>
    ))}
  </div>


</StarlightPage>
